<template>
  <div class="section-film">
    <div class="wrapper_left">
      <h2><a href="#">电影</a></h2>
      <ul>
        <li><a href="#">影讯&amp;购票</a></li>
        <li>
          <a href="#">选电影</a>
          <span>
            <img src="../../../assets/images/content/new_menu.gif" alt="new_menu">
          </span>
        </li>
        <li><a href="#">电视剧</a></li>
        <li><a href="#">排行榜</a></li>
        <li><a href="#">分类</a></li>
        <li><a href="#">影评</a></li>
        <li><a href="#">预告片</a></li>
        <li><a href="#">问答</a></li>
      </ul>
    </div>

    <div class="wrapper_center">
      <div class="center_header">
        <h2>
          正在热映&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
          (&nbsp;
          <a href="#" class="time_a">更多</a>
          &nbsp;)
        </h2>
        <div class="film_center">
           <ul>
            <li v-for="film in films" :key=film.id>
              <!-- 图片部分 -->
              <div class="pic">
                <a href="#">
                  <img :src="film.url" alt="film">
                </a>
              </div>
              <!-- 电影名部分 -->
              <div class="title"><a href="#">{{film.title}}</a></div>
              <!-- 打分部分 -->
              <div class="rating">
                <el-rate
                  v-model="film.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  disabled-void-color="#cccccc"
                  score-template="{value}">
                </el-rate>
              </div>

              <!-- 购票链接部分 -->
              <a href="#" class="purcharse">选座购买</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="wrapper_right">
      <div class="movie_right">
        <div class="movie_item">
          <h2>
              影片分类&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
              (&nbsp;
              <a href="#" class="time_a">更多</a>
              &nbsp;)
          </h2>
        </div>

        <div class="movies">
          <ul>
            <li v-for="type in movieTypes" :key="type.id"><a :href="type.url">{{type.type}}</a></li>
          </ul>
        </div>

        <div class="movie_hot">
          <h2>
            近期热门&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
            (&nbsp;
            <a href="#" class="time_a">更多</a>
            &nbsp;)
          </h2>
        </div>

        <div class="hotMovie">
          <ol>
            <li v-for="hm in hotMovies" :key="hm.id"><a :href="hm.url">{{hm.title}}</a></li>
          </ol>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      films: [
        { id: '1', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '2', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '3', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '4', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '5', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '6', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '7', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 },
        { id: '8', url: require('../../../assets/images/content/p2501769525.webp'), title: '全球风暴', rate: 3.7 }

      ],
      movieTypes: [
        { id: '1', url: '#', type: '爱情' },
        { id: '2', url: '#', type: '喜剧' },
        { id: '3', url: '#', type: '剧情' },
        { id: '4', url: '#', type: '动画' },
        { id: '5', url: '#', type: '科幻' },
        { id: '6', url: '#', type: '动作' },
        { id: '7', url: '#', type: '经典' },
        { id: '8', url: '#', type: '悬疑' },
        { id: '9', url: '#', type: '青春' },
        { id: '10', url: '#', type: '犯罪' },
        { id: '11', url: '#', type: '惊悚' },
        { id: '12', url: '#', type: '文艺' },
        { id: '13', url: '#', type: '纪录片' },
        { id: '14', url: '#', type: '励志' },
        { id: '15', url: '#', type: '剧情' },
        { id: '16', url: '#', type: '战争' },
        { id: '17', url: '#', type: '恐怖' },
        { id: '18', url: '#', type: '黑色幽默' },
        { id: '19', url: '#', type: '美国' },
        { id: '20', url: '#', type: '日本' },
        { id: '21', url: '#', type: '香港' },
        { id: '22', url: '#', type: '爱情' },
        { id: '23', url: '#', type: '英国' },
        { id: '24', url: '#', type: '印度' },
        { id: '25', url: '#', type: '中国' },
        { id: '26', url: '#', type: '韩国' },
        { id: '27', url: '#', type: '法国' },
        { id: '28', url: '#', type: '台湾' },
        { id: '29', url: '#', type: '中国大陆' },
        { id: '30', url: '#', type: '德国' }
      ],
      hotMovies: [
        { id: '1', url: '#', title: '小戏骨：红楼梦之刘姥姥进大观园' },
        { id: '2', url: '#', title: '极寒之城' },
        { id: '3', url: '#', title: '猩球崛起3：终极之战' },
        { id: '4', url: '#', title: '杀破狼·贪狼' },
        { id: '5', url: '#', title: '大护法' },
        { id: '6', url: '#', title: '小丑回魂' },
        { id: '7', url: '#', title: '猎凶风河谷' },
        { id: '8', url: '#', title: '双面情人' },
        { id: '9', url: '#', title: '美国行动' },
        { id: '10', url: '#', title: '辣手保姆' }
      ]

    }
  }
}
</script>
<style lang="scss">
.el-rate__item{
  width: 17px;
}
.section-film{
  position: relative;
  width: 100%;
  height: 650px;
  background-color: #F7F7F7;
  color: #27a; /* 这个参数并不能使内部（多层）的font变色 */
  h2{
    font-size: 24px;
    line-height: 150%;
    margin: 0 0 10px 0;
    a{
      color: #27a;
    }
  }
  .wrapper_left{
    position: absolute;
    left: 210px;
    top: 40px;
    ul{
      list-style-type: none;
      padding-left: 0;
      li{
        margin-bottom: 8px;
        a{
          font-size: 14px;
          color: #27a;
        }
      }
    }
  }
  .wrapper_center{
    .center_header{
      h2{
        color: #072;
        font-size: 15px;
        line-height: 150%;
        margin: 0 0 10px 0;
      }
    }
      position: absolute;
      left: 325px;
      top: 40px;
      width: 540px;
    ul{
      list-style-type: none;
      padding-left: 0;
      li{
        display: inline-block;
        margin-bottom: 30px;
        .pic{
          margin: 0 15px 10px 15px;
          img{
            width: 100px;
            height: 145.37px;
          }
        }
        .title{
          text-align: center;
          margin-bottom: 5px;
          a{
            color: #333;
            font-size: 14px;
          }
        }
        .rating{
          width: 110px;
          margin: 0 auto;

        }
        .purcharse{
          background-color: #1c8bd0;
          color: white;
          text-align: center;
          margin-left: 30px;
        }
      }
    }
  }

  .wrapper_right{
    position: absolute;
    left: 890px;
    top: 40px;
    width: 280px;
    a{
      color:#669;
    }
    .movie_right{
      h2{
        color: #072;
        font-size: 15px;
        line-height: 150%;
        margin: 0 0 10px 0;
      }
      .movies{
        ul{
          list-style-type: none;
          padding-left: 0;
          li{
            display: inline-block;
            width: 48px;
            a{
              font-size: 12px;
            }
          }
        }
      }
      .hotMovie{
        ol{
          padding-left: 15px;
          li{
            margin-bottom: 10px;
            border-bottom: 1px solid  #EAEAEA;
            a{
              font-size: 13px;
            }
          }
        }
      }
    }

  }
}
</style>
